<template>
  <div class="item">
    <Header class="head" title="云管家" />
    <img class="login" src="@/assets/Login-bg@3x.png" />
    <div class="login-box">
      <h2>登录</h2>
      <form>
        <div class="login-text">
          <img class="small" src="@/assets/usersmall.png" alt />
          <input type="text" v-model="username" placeholder="请输入账号" />
        </div>
        <div class="login-text">
          <img class="small" src="@/assets/lock.png" alt />
          <input type="password" v-model="password" placeholder="请输入密码" />
        </div>
      </form>
      <div class="btn" @click="login">登录</div>
      <div class="login-bottom">
        <p class="bom-left" @click="forget">忘记密码</p>
        <p class="bom-right" @click="register">立即注册</p>
      </div>
    </div>
  </div>
</template>

<script>
//import timer from '../timer'
import md5 from "js-md5";
import { Toast } from "mint-ui";
import { login } from "../old_request";
import Header from './header'
export default {
  data() {
    return {
      username: null,
      password: null,
      time: null
    };
  },
  components:{
      Header
  },
  methods: {
    login() {
      var that = this;
      var regNum = new RegExp("0?(1)[0-9]{10}", "g"); //判断用户输入的是否为手机号码
      var rsNum = regNum.exec(that.username);

      var data = {
        sign: md5(`${that.wrapper.globalData()}mobile=${that.username}timestamp=${that.wrapper.gettime()}`),
        timestamp: that.wrapper.gettime(),              //获取时间戳
        mobile: that.username,                          //获取手机号码
        password: md5(that.password)                     //md5加密用户密码
      };
      if (that.username !== "") {
        if (that.password !== "") {
          if (rsNum) {
            login(data, that).then(res => {                    //发起登录请求
               console.log(res);
              if (res.code === 0) {
                Toast({
                  message: "登录成功",
                  iconClass: "iconfont icon-success_no_circle",
                  duration: 1500
                });
                that.$store.commit('login',res.data)      //调用vuex中方法
                that.wrapper.setlocalstoge("item",JSON.stringify(res.data));        //将登录后的数据存到本地
                that.wrapper.setlocalstoge("mobile",that.username);      //存储用户手机号码
                setTimeout(() => {
                  that.$router.push("/home");               //延迟两秒跳转首页
                }, 2000);
              }else{
                Toast({
                  message: "密码错误",
                  iconClass: "iconfont icon-cuowu",
                  duration: 1500
                });
              }
            });
          } else {
            Toast({
              message: "手机号格式错误",
              iconClass: "iconfont icon-cuowu",
              duration: 1500
            });
          }
        } else {
          Toast({
            message: "密码不能为空",
            iconClass: "iconfont icon-cuowu",
            duration: 1500
          });
        }
      } else {
        Toast({
          message: "手机号不能为空",
          iconClass: "iconfont icon-cuowu",
          duration: 1500
        });
      }
    },
    register() {                          //跳转注册页面
      this.$router.push("/register");
    },
    forget(){                                 //跳转忘记密码页面
      this.$router.push('/forget');
    }
  }
};
</script>



<style scoped>
/* Login-bg@3x.png */
.item {
  position: relative;
}
.head{
  background: linear-gradient(to bottom, #128ae7, #12ade7) !important;
}
.login {
  width: 100%;
  height: 280px;
}
.login-box {
  width: 90%;
  box-shadow: 0px 2.5px 2.5px 2.5px rgb(195, 195, 195);
  background: white;
  margin-left: 5%;
  height: 300px;
  border-radius: 15px;
  position: absolute;
  margin-top: -40px;
}
.login-box h2 {
  text-align: center;
  margin: 20px 0;
  color: #128be5;
}
.login-box form {
  margin: 0px 3%;
}
.login-text {
  display: flex;
  height: 45px;
  margin: 25px auto 0 auto;
  background: #eeeeee;
  border-radius: 50px;
}
.small {
  width: 30px;
  height: 30px;
  margin: 8px 15px 5px 15px;
  float: left;
}
.login-text input {
  flex: 1;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  background: #eeeeee;
  border: none;
  font-size: 16px;
  outline: none;
}
.btn {
  /* width:88%; */
  background: #128be5;
  margin: 20px 3%;
  color: white;
  height: 40px;
  border-radius: 50px;
  text-align: center;
  line-height: 40px;
}
.login-bottom {
  width: 83%;
  margin: 3px auto 0 auto;
}
.bom-left {
  box-sizing: border-box;
  float: left;
  color: #00a2df;
}
.bom-right {
  text-align: right;
  color: #00a2df;
}
</style>
